<template>
     <div class="box">
          <!-- 布局
            (1) http://localhost:8080/ => / 首页
           -->
          <div class="top"></div>
          <div class="content">
            <!-- 内容区域 -->
            <router-view></router-view>
          </div>
          <div class="foot"></div>
     </div>
</template>

<script>
export default {

}
</script>

<style>
 .box{
     height:600px;
     width:800px;
     border:1px solid red;
     margin:0 auto;
 }
 .top{
    height:60px;
    background: black;
 }
 .content{
    height:500px;
    width:100%;

 }
 .foot{
    height:40px;
    background: red;
 }

</style>